<template>
    <Popup :class="`select-goods-status ${mode}`" position="bottom" v-model="visiable" get-container="body">
        <SelectModalHeader
            :mode="mode"
            :styleMode="styleMode"
            :theme="theme"
            @cancel="hide"
            @ok="ensureSelect"
        />
        <Picker class="select-content-list" :columns="columns" @change="onChange" />
    </Popup>
</template>

<script>
import { Picker, Popup } from 'vant';
import { SelectModalHeader } from '@components/biz';
import { AFTER_SALE_GOODS_STATUS_TYPE } from '@constants/shop';
import ModeMixin from '@common/mixin';
export default {
    name: 'SelectGoodsStatus', // 选择商品状态
    mixins: [ModeMixin],
    components: {
        Popup,
        Picker,
        SelectModalHeader,
    },
    data() {
        return {
            visiable: false,
            selectValue: AFTER_SALE_GOODS_STATUS_TYPE[0],
            columns: AFTER_SALE_GOODS_STATUS_TYPE,
        };
    },
    methods: {
        show() {
            this.visiable = true;
        },
        hide() {
            this.visiable = false;
        },
        ensureSelect() {
            this.$emit('ensure', this.selectValue);
            this.hide();
        },
        onChange(item, value) {
            this.selectValue = value;
        },
    },
};
</script>

<style lang="less">
.select-goods-status {
    &.black {
        .select-content-list {
            background-color: @black-bg-color;
            .van-picker-column__item--selected {
                color: @white !important;
            }
        }
    }
}
</style>
